<template>
	<view class="business-home">
		<!-- 头部 -->
		<view class="home-hand">
			<!-- 头像 -->
			<view class="hand-portrait">
				<image :src="busin.avatarUrl"></image>
			</view>
			<!-- 昵称 -->
			<view class="hand-nickname">{{busin.busiName}}</view>
			<!-- 消息图标 -->
			<view class="hand-icon" @tap="navTo('../mine/email/email')">
				<u-icon name="email" color="#fff" size="50"></u-icon>
				<text style="color: #fff;">消息</text>
				<!-- <view class="hand-icon-red"></view> -->
			</view>
		</view>
		<!-- 钱包余额及订单数 -->
		<view class="home-show">
			<view class="balance" @tap="navTo('./money-manage/money-manage')">
				<view class="show-top">账户余额 (元)</view>
				<view class="show-buttom">{{money || 0}}</view>
			</view>
			<view class="order">
				<view class="show-top">今日订单数 (笔)</view>
				<view class="show-buttom">{{orderData.orderQuant || 0}}</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper :list="list" name="picUrl"></u-swiper>
		</view>
		<!-- 功能列表 -->
		<view class="home-menu">
			<!-- 订单管理 -->
			<view class="item">
				<view class="item-head" @tap="navTo('./order-manage/order-manage')">
					<view class="head-left">
						<u-icon name="order" color="#2ba4f7" size="50" class="left-icon"></u-icon>
						订单管理
					</view>
					<view class="head-right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="item-body">
					<view class="body-son">
						<view class="son-moddle">{{orderData.ready || 0}}</view>
						<view class="son-bottom" @tap="navTo('./order-manage/order-manage?tab=0')">待发货 <u-icon name="arrow-right" size=12px></u-icon></view>
					</view>
					<view class="body-son">
						<view class="son-moddle">{{orderData.todaySum || 0}}</view>
						<view class="son-bottom" @tap="navTo('./order-manage/order-manage?tab=1')">已发货 <u-icon name="arrow-right" size=12px></u-icon></view>
					</view>
					<view class="body-son">
						<view class="son-moddle">{{orderData.refCount || 0}}</view>
						<view class="son-bottom" @tap="navTo('./order-manage/refund-after/refund-after')">售后 <u-icon name="arrow-right" size=12px></u-icon></view>
					</view>
				</view>
			</view>
			<!-- 商品管理 -->
			<view class="item">
				<view class="item-head" @tap="navTo('./goods-manage/goods-manage')">
					<view class="head-left">
						<u-icon name="bag" color="#2ba4f7" size="50"class="left-icon"></u-icon>
						商品管理
					</view>
					<view class="head-right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="item-body">
					<view class="body-son">
						<view class="son-moddle">{{goodsData.groundTotal || 0}}</view>
						<view class="son-bottom" @tap="navTo('./goods-manage/goods-manage')">待上架 <u-icon name="arrow-right" size=12px></u-icon></view>
					</view>
					<view class="body-son">
						<view class="son-moddle">{{goodsData.salesTotal || 0}}</view>
						<view class="son-bottom" @tap="navTo('./goods-manage/goods-manage?wen=1')">销售中 <u-icon name="arrow-right" size=12px></u-icon></view>
					</view>
					<view hover-class="none" class="body-son" @tap="navTo('/pages/home/goods-manage/addProduct/stepOne')">
						<view class="son-moddle">
							<u-icon name="plus-circle" color="#2ba4f7" size="50"class="left-icon"></u-icon>
						</view>
						<view class="son-bottom">新增商品</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				busin:this.$store.state.userInfo,
				list: [{
						picUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
					}],                       //轮播图列表
				money:0,                        //账户余额
				orderData:{},                   //订单相关数据
				goodsData:{},                   //商品相关数据
			};
		},
		onShow() {
			this.getData()
		},
		onPullDownRefresh(){
			this.getData();
			setTimeout(()=>{
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			},1000)
		},
		methods:{
			async getData(){
				if(!this.busin || this.busin?.examineStatus != 1) return this.$u.route({url:'/pages/auth/apply/apply',type:'reLaunch'});
				this.getImageList()
			},
			//获取轮播图列表
			getImageList(){
				this.$http.post('/api/advert/loadBusin',{type:3}).then(res => {
					if(!res.success) return;
					this.list = res.data;
					this.getMoney();
					this.getOrder();
					this.getGoods()
				})
			},
			//获取账户余额
			getMoney(){
				this.$http.post('/api/auth/business/merchAcc',this.$store.state.userInfo.id).then(res => {
					this.money = res.data?.busiBalance
				})
			},
			//获取订单相关数据
			getOrder(){
				this.$http.post('/api/auth/order/todayAmount',this.$store.state.userInfo.id).then(res => {
					this.orderData = res.data
				})
			},
			//获取商品相关数据
			getGoods(){
				this.$http.post('/api/auth/goods/salesAndGround',this.$store.state.userInfo.id).then(res => {
					this.goodsData = res.data
				})
			},
			//跳转拦截
			navTo(url){
				if (this.$store.state.userInfo) return uni.navigateTo({url});
				uni.showToast({ title: '您还没登录，请先登录！',icon:'none'});
				setTimeout(()=>{
					this.$u.route({url:'../auth/btnAuth/wechatAuth',type:'redirect'})
				},1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.business-home {
		box-sizing: border-box;
		position: relative;
		width: 100vw;
		height: 116vh;
		background-color: #ececec;
		.home-hand {
			display: flex;
			height: 260rpx;
			background-color: rgba($color: #2ba4f7, $alpha: 1);
			.hand-portrait {
				width: 120rpx;
				height: 120rpx;
				padding: 4rpx;
				margin: 20rpx 30rpx;
				background-color: #fff;
				border-radius: 50%;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%
				}
			}
			.hand-nickname {
				width: 340rpx;
				font-size: 17px;
				line-height: 160rpx;
				color: #fff;
				font-weight: 700;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.hand-icon{
				display: flex;
				flex-direction: column;
				align-items: center;
				position: absolute;
				right: 60rpx;
				top: 34rpx;
				font-size: 15px;
				font-weight: 700;
				.hand-icon-red{
					position: absolute;
					bottom: 73rpx;
					left: 42rpx;
					border: 4px solid #ee0000;
					border-radius: 4px;
				}
			}
		}
		.home-show{
			z-index: 2;
			position: absolute;
			display: flex;
			width: 96%;
			height: 180rpx;
			margin: -90rpx 20rpx 20rpx 20rpx;
			padding: 40rpx;
			border-radius: 10px;
			background-color: #fff;
			.balance{
				width: 50%;
				border-right: 1px solid #e3e3e3 ;
			}
			.order{
				margin-left: 20px;
			}
			.show-top{
				text-align: center;
				font-size: 15px;
				color: #a5a5a5;
			}
			.show-buttom{
				text-align: center;
				margin-top: 20rpx;
				font-size: 20px;
				font-weight: 700;
			}
		}
		.swiper{
			height: 250rpx;
			margin: 110rpx 20rpx 20rpx;
			border-radius: 100rpx;
			background-color: red;
		}
		.home-menu{
			.item{
				height: 300rpx;
				margin: 20rpx 20rpx;
				border-radius: 10px;
				background-color: white;
				.item-head{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 30rpx;
					.head-left{
						display: flex;
						width: 300rpx;
						font-size: 16px;
						line-height: 60rpx;
						.left-icon{
							margin: 0 10rpx 7rpx 0;
						}
					}
					.head-right{
						font-size: 16px;
						color: #adadad;
					}
				}
				.item-body{
					display: flex;
					justify-content: space-around;
					margin: 10px 0;
					.body-son{
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						text-align: center;
						.son-top{
							font-weight: 700;
						}
						.son-moddle{
							margin: 5px;
							font-size: 18px;
							font-weight: 700;
						}
						.son-bottom{
							font-size: 12px;
							color: #adadad;
						}
					}
				}
				.market-tool{
					display: flex;
					flex-wrap: wrap;
					.tool-son{
						width: calc(50% - 60rpx);
						height: 38px;
						margin:  0 0 20rpx 40rpx;
						text-align: center;
						line-height: 35px;
						font-size: 15px;
						border-radius: 15px;
						background-color: #f3f3f3;
					}
				}
			}
		}
	}
</style>